<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    #div1 {
      width: 200px;
      height: 200px;
      background: #fff;
      border: 1px solid #666;
    }
  </style>

</head>

<body>
  <div id="div1">将文件拖拽到此区域</div>
  <ul id="ul1">

  </ul>

  <script type="text/javascript">
    window.onload = function () {
      var div1 = document.getElementById("div1");
      div1.ondragenter = function () { //ondragenter当拖曳元素进入目标元素的时候触发的事件
          this.innerHTML = "可以释放了";
      }
      div1.ondragover = function (e) { //ondragover拖拽元素在目标元素上移动的时候触发的事件
          e.preventDefault();//阻止默认的些事件方法等执行。
          //在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
          //另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
          //此时需要用用document的ondragover事件把它直接干掉
      }
      div1.ondragleave = function () { //ondragleave在可拖动的元素移出放置目标时触发的事件
          this.innerHTML = "将文件拖拽到此区域";
      }
      div1.ondrop = function (e) { //ondrop被拖拽的元素在目标元素上同时鼠标放开触发的事件
          e.preventDefault();
          var files = e.dataTransfer.files; //dataTransfer退拽对象用来传递的媒介
          var fd = new FileReader();
          if (files[0].type.indexOf('image') != -1) { //判断是否是图片
              fd.readAsDataURL(files[0]);
              var ul1 = document.getElementById("ul1");
              fd.onload = function () {
                  var li1 = document.createElement("li");
                  var img1 = document.createElement("img");
                  img1.src = this.result;
                  li1.appendChild(img1);
                  ul1.appendChild(li1);
              }
          } else { 
            alert("请选择图片上传"); 
          }
      }

      // alert(files.length);
    }
  </script>
</body>

</html>